<template>
  <qc-page-header @back="goBack"></qc-page-header>
  <a-card :bordered="false" :title="t('org.dictionary-type.dictionaryTypeCardTitle')">
    <template #extra>
      <qc-save-button @click="save"></qc-save-button>
    </template>
    <dictionary-type-form ref="dictionaryTypeFormRef" :dictionaryTypeId="dictionaryTypeId"></dictionary-type-form>
  </a-card>
  <div class="mt16">
    <dictionary-table v-if="codeItemId" :codeItemId="codeItemId"></dictionary-table>
  </div>
</template>
<script lang='ts'>
import { useRouter } from 'vue-router'
import { computed, defineComponent, reactive, ref, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import { dictionaryIndexPageUrl } from './interface'
import DictionaryTypeForm from './component/dictionary-type-form.vue'
import DictionaryTable from '/@/views/org/dictionary/component/dictionary-list.vue'
export default defineComponent({
  components: {
    DictionaryTypeForm,
    DictionaryTable,
  },
  setup() {
    const { t } = useI18n()
    const dictionaryTypeFormRef = ref()
    const router = useRouter()
    const codeItemId = computed(() => {
      return dictionaryTypeFormRef.value ? dictionaryTypeFormRef.value.getCodeItemId() : null
    })
    const formState = reactive({
      dictionaryTypeId: router.currentRoute.value.params.id,
      save: () => dictionaryTypeFormRef.value.onSubmit(),
      goBack: () => router.push({ path: dictionaryIndexPageUrl }),
    })
    return {
      t,
      dictionaryTypeFormRef,
      codeItemId,
      ...toRefs(formState),
    }
  },
})
</script>
<style lang='less' scoped>
</style>